<template>
  <div>
<h1>房间信息展示</h1>
    <div>
      房型名称<input type="text" v-model="info.name"/>
      状态<select v-model="info.state">
      <option value="">请选择</option>
      <option :value="1">启用</option>
      <option :value="0">停用</option>
    </select>
      <input type="button" value="查询" class="btn btn-success" @click="getlist"/>
      <input type="button" value="重置" class="btn btn-primary" @click="rest"/>
    </div>
    <table class="table table-bordered">
      <tbody>
      <tr style='background-color:aquamarine'>
        <td>房型名称</td>
        <td>门市销售价格</td>
        <td>房间数</td>
        <td>状态</td>
        <td>房间号</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in data.list">
        <td>{{ item.RoomName }}</td>
        <td style="color: red">￥{{ item.Money.toFixed(2) }}</td>
        <td>{{ item.RoomCount }}</td>
        <td>{{ item.State?"启用":"停用"}}</td>
        <td>{{ item.RoomNuber }}</td>
        <td>
          <input type="button" value="修改" class="btn btn-warning" @click="updatelist(item.Id)"/>
          <input type="button" value="删除" class="btn btn-danger" @click="deletelist(item.Id)"/>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <span>共<b>{{data.totalcount}}</b>条</span>
      <span>当前<b>{{info.pageindex}}</b>页</span>
      <span>当前<b>{{info.pageindex}}</b></span>/<span><b>{{data.totalpage}}</b></span>

      <input type="button" class="btn btn-success" value="首页" @click="page(1)"/>
      <input type="button" class="btn btn-success" value="上一页" @click="page(info.pageindex-1)"/>
      <span v-for="itme in data.totalpage" @click="page(itme)">{{itme}}</span>
      <input type="button" class="btn btn-success" value="下一页" @click="page(info.pageindex+1)"/>
      <input type="button" class="btn btn-success" value="尾页" @click="page(data.totalpage)"/>

      <input type="number" v-model="info.pageindex"/>
      <input type="button" value="跳转" class="btn btn-success" @click="page(info.pageindex)"/>

      <select class="btn btn-success" v-model="info.pagesize" @click="getlist">
        <option value="">请选择</option>
        <option :value="item" v-for="item in arr">每页{{item}}条</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import {useRouter,useRoute} from "vue-router";
const router = useRouter();
const route = useRoute();

//页面挂载数据
onMounted(() => {
  getlist();
})
const rest=()=>{
     info.name=""
     info.state=""
}

const updatelist=(id:any)=>{
  console.log(id);
  router.push({
    path:'/roomUpdate',
    query:{id:id},
  });
}

//删除
const deletelist=(id:any)=> {
  let f = confirm("确认删除")
  if (f) {
    axios({
      url: "http://localhost:5137/api/Room/Delte",
      method: "delete",
      params: {id: id}
    }).then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert("删除成功")
        getlist();
      } else {
        alert("删除失败")
      }
    })
  }
}

//定义数组修改页容量
let arr:any=reactive([2,4,6,8])
//翻页
const page = (num:any) => {
  info.pageindex = num;
  getlist();
}
//定义发送数据
let info:any=reactive({
  pageindex:1,
  pagesize:2,
  name:"",
  state:"",
})
//定义接受数据
let data:any=reactive({
  totalcount:"",
  totalpage:"",
  list:[],
})

const getlist=()=>{
  axios({
    url:'http://localhost:5137/api/Room/GetAllRoom',
    method:'get',
    params:info,
  }).then((res:any)=>{
    console.log(res)
    data.totalcount = res.data.totalcount;
    data.totalpage = res.data.totalpage;
    data.list = res.data.list;
  })
}
</script>

<style scoped>
span{
  margin: 0 10px;
}
b{
  color:red;
}
</style>